<template>
  <el-row class="app">
    <el-row class="main" v-show="!loginShow">
      <el-row class="header" type="flex" justify="space-between">
        <el-button size="mini" icon="el-icon-house" @click="home">官网</el-button>
        <el-button size="mini" icon="el-icon-link" @click="login" v-show="!isLogin">登录</el-button>
        <el-button size="mini" icon="el-icon-link" @click="point" v-show="isLogin">变态值 {{ level }}</el-button>
      </el-row>
      <el-row class="body">
        <el-input placeholder="请输入资源关键字..." v-model.trim="searchTxt" size="medium" @keyup.native.enter="search">
          <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
        </el-input>
      </el-row>
      <el-row class="footer" type="flex" justify="space-between">
        <el-switch class="footerSwitch" v-model="share" @change="shareChange" active-color="#13ce66" inactive-color="#dcdfe6" active-text="分享提取密码"></el-switch>
        <span class="version">版本号：0.0.1 已是最新版</span>
      </el-row>
    </el-row>
    <el-row class="login" v-show="loginShow">
      <el-row class="header" type="flex" justify="space-between">
        <el-button size="mini" icon="el-icon-back" @click="login">返回</el-button>
      </el-row>
      <el-row class="body">
        <el-input placeholder="请输入口令..." v-model.trim="command" size="medium" @keyup.native.enter="loginEvent">
          <el-button slot="append" icon="el-icon-key" @click="loginEvent"></el-button>
        </el-input>
      </el-row>
      <el-row class="footer" type="flex" justify="space-between">
        <span class="tips">{{ tips }}</span>
        <span class="wx" @click="about">关于口令</span>
      </el-row>
    </el-row>
  </el-row>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      searchTxt: '',
      share: false,
      loginShow: false,
      isLogin: false,
      command: '',
      tips: '',
      level: 2
    }
  },
  methods: {
    home () {
      // eslint-disable-next-line
      chrome.tabs.create({ url: 'https://www.panhim.com/' })
    },
    login () {
      this.loginShow = !this.loginShow
    },
    point () {
      // eslint-disable-next-line
      chrome.tabs.create({ url: 'https://www.panhim.com/' })
    },
    search () {
      if (this.searchTxt) {
        // eslint-disable-next-line
        chrome.tabs.create({ url: 'https://www.panhim.com/search?query=' + this.searchTxt })
      }
    },
    shareChange (e) {
      console.log(e)
      // eslint-disable-next-line
      chrome.storage.sync.set({ share: this.share })
    },
    loginEvent () {
      if (this.command) {
        this.tips = '登录成功'
        // eslint-disable-next-line
        chrome.storage.sync.set({ command: this.command })
        let timer = setTimeout(() => {
          this.isLogin = true
          this.loginShow = false
          clearTimeout(timer)
        }, 1500)
      } else {
        this.tips = '无效口令'
      }
    },
    about () {
      // eslint-disable-next-line
      chrome.tabs.create({ url: 'https://www.panhim.com/' })
    }
  },
  created () {
    let config = {
      share: false,
      command: ''
    }
    // eslint-disable-next-line
    chrome.storage.sync.get(config, (items) => {
      this.share = items.share
      this.isLogin = items.command.length > 0 ? true : false
    })
    // chrome.storage.sync.set(config)
  }
}
</script>
